<!--
@description: 
@creationTime: 2025-04-09
-->

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '登录'
  }
}
</route>

<template>
  <view
    class="flex flex-col flex-items-center h-100vh"
    style="background: linear-gradient(to bottom, #ffffff, #add8e6)"
  >
    <!-- logo -->
    <view class="m-3 mt-30 flex flex-justify-center flex-items-center">
      <wd-img
        :width="100"
        :height="100"
        src="https://bkimg.cdn.bcebos.com/pic/6f061d950a7b02087bf4d1bc4c80e5d3572c11df626e?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080"
      />
    </view>
    <wd-card style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)">
      <view class="mt-4">
        <wd-cell-group>
          <wd-form ref="formRef" :model="formData" :label-width="50">
            <wd-input
              label-width="70px"
              label="用户名"
              prop="loginName"
              v-model="formData.loginName"
              placeholder="请输入用户名或手机号"
              :rules="[{ required: false, validator, message: '请输入用户名或手机号' }]"
            />
            <wd-input
              label-width="70px"
              label="密码"
              prop="password"
              show-password
              v-model="formData.password"
              placeholder="请输入密码"
              :rules="[{ required: false, validator: passwordValidator, message: '请输入包含英文和数字的8-16位字符' }]"
            />
          </wd-form>
        </wd-cell-group>
        <view class="mb-3 mt-3">
          <wd-button :block="true" class="mt-6" @click="submitForm">登录</wd-button>
        </view>
        <view class="text-center mb-3 mt-3">
          还没有账号？
          <text class="text-#409EFF" @click="goRegister">立即注册</text>
        </view>
      </view>
    </wd-card>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { loginApi } from '@/api/loginApi'
interface UserRegistrationData {
  loginName: string
  password: string
}
const pageConfig = ref<any>({})
onLoad(res => {
  pageConfig.value = res
})
const formRef = ref<any>()
const formData = ref<UserRegistrationData>({
  loginName: '18864484503',
  password: 'zxf123456'
})
const goRegister = () => {
  if (Object.keys(pageConfig.value).length) {
    uni.redirectTo({ url: '/pages/register/index?id=' + pageConfig.value.id + '&type=' + pageConfig.value.type })
    return
  }
  uni.redirectTo({ url: '/pages/register/index' })
}
const validator = (val, data) => {
  if (String(val).length >= 1) {
    return Promise.resolve()
  } else {
    return Promise.reject(data.message)
  }
}
const passwordValidator = (val, data) => {
  const reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/
  if (reg.test(val)) {
    return Promise.resolve()
  } else {
    return Promise.reject(data.message)
  }
}
const submitForm = () => {
  formRef.value
    .validate()
    .then(async ({ valid, errors }) => {
      if (valid) {
        uni.showLoading({
          title: '登录中...',
          mask: true
        })
        await loginApi(formData.value)
        uni.hideLoading()
        uni.showToast({
          title: '登录成功',
          icon: 'none',
          duration: 1200
        })
        setTimeout(() => {
          if (Object.keys(pageConfig.value).length) {
            uni.switchTab({
              url: '/pages/share/index?id=' + pageConfig.value.id + '&type=' + pageConfig.value.type
            })
          } else {
            uni.switchTab({
              url: '/pages/home/company-home/index'
            })
          }
        }, 1200)
      }
    })
    .catch(error => {
      console.log(error, 'error')
    })
}
</script>

<style lang="scss" scoped></style>
